<template>
    <div id="home">
        <div class="title">{{title}}</div>
        <div class="form">
            <input class="input" @input="changeMsg" placeholder="请输入内容" />
            <p class="msg">{{msg}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: 'Welcome to Home',
            msg: ''
        }
    },
    methods: {
        changeMsg(e) {
            this.msg = e.target.value;
        }
    }
}
</script>
<style lang="less">
#home{
    margin: 50px 0;
    color: #333;
    .title{
        text-align: center;
        font-size: 36px;
        font-weight: bold;
    }
    .form{
        margin-top:30px;
        text-align: center;
        font-size: 16px;
        .input{
            font-size: 16px;
            width:400px;
            height:40px;
            line-height: 40px;
            padding:0 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .msg{
            margin:20px 0 0;
        }
    }
}
</style>